<template>
  <view class="content">
    <view class="tabs">
      <u-tabs :list="tab" :current="current" @change="selectActive" :show-bar="false" active-color="#D12C25" inactive-color="#999999"></u-tabs>
      <!-- <view v-for="(item, index) in tab" :key="index" :class="[index === current ? 'active' : '']"
        @tap="selectActive(index)">
        {{ item.name }}
      </view> -->
    </view>
    <view class="bigBox">
      <view class="contentBox" v-for="(item, index) in arr" :key="index" @tap="goEvaDetail(item)">
        <view class="BoxTop">
          <view class="BoxTopleft">
            <image class="smallImg" :src="item.merchantHead"></image>
            <text class="">{{ item.merchantName }}</text>
          </view>
          <view class="BoxTopRight">
            <!-- 通用状态 -->
            <view v-if="item.orderStatus == 1" class="Payfor">
              <text>待支付</text>
            </view>
            <view v-if="item.orderStatus == 5" class="refuseMoney">
              <text>已取消</text>
            </view>
            <view v-if="item.orderStatus == 6" class="Payfor">
              <text>待支付</text>
            </view>
            <view v-if="item.orderStatus == 8" class="Refunded">
              <text>已取消</text>
            </view>
            <view v-if="item.orderStatus == 9" class="Perfect">
              <text>已完成</text>
            </view>
            <view v-if="item.orderStatus == 10" class="Noevaluate">
              <text>未评价</text>
            </view>
            <view v-if="item.orderStatus == 11" class="Already">
              <text>已评价</text>
            </view>
            <view v-if="item.orderStatus == 12" class="Refunded">
              <text>订单超时</text>
            </view>
            <view v-if="item.orderStatus == 13 || item.orderStatus == 14" class="Being">
              <text>退款中</text>
            </view>
            <view v-if="item.orderStatus == 15" class="refuseMoney">
              <text>拒绝退款</text>
            </view>
            <view v-if="item.orderStatus == 16" class="refuseMoney">
              <text>已退款</text>
            </view>
            <!-- 物资配送 -->
            <view
              v-if="item.orderStatus == 2 && item.orderType == 1"
              class="Ongoing">
              <text>待接单</text>
            </view>
            <view
              v-if="item.orderStatus == 3 && item.orderType == 1"
              class="Ongoing">
              <text>备餐中</text>
            </view>
            <view
              v-if="item.orderStatus == 4 && item.orderType == 1"
              class="Ongoing">
              <text>待取餐</text>
            </view>
            <view
              v-if="item.orderStatus == 7 && item.orderType == 1"
              class="Ongoing">
              <text>配送中</text>
            </view>
            <!-- 健康检测 -->
            <view
              v-if="item.orderStatus == 2 && item.orderType == 2"
              class="Ongoing">
              <text>待使用</text>
            </view>
            <!-- 购物商城 -->
            <view
              v-if="item.orderStatus == 3 && item.orderType == 3"
              class="Ongoing">
              <text>待发货</text>
            </view>
            <view
              v-if="item.orderStatus == 7 && item.orderType == 3"
              class="Ongoing">
              <text>待收货</text>
            </view>
            <!-- 家电维修 -->
            <view
              v-if="item.orderStatus == 2 && item.orderType == 4"
              class="Ongoing">
              <text>待接单</text>
            </view>
            <view
              v-if="item.orderStatus == 3 && item.orderType == 4"
              class="Ongoing">
              <text>待检修</text>
            </view>
            <view
              v-if="item.orderStatus == 7 && item.orderType == 4"
              class="Ongoing">
              <text>检修中</text>
            </view>
          </view>
        </view>
        <view v-for="(items, index) in item.orderProductsList" :key="index" class="BoxPart">
          <image class="" :src="items.productImg"></image>
          <view class="BoxCc">
            <view class="Boxtitle">
              <text> {{ items.productName }}</text>
              <text>x{{ items.productCount }}</text>
            </view>

            <view class="BoxPrice">
              <view v-if="item.orderStatus == 6" class="Price">
                ￥{{ (item.payMoney - item.visitFee) / 100 }}
              </view>
              <view v-else class="Price">
                ￥{{ (items.productTotalPrice) / 100 }}
              </view>
              
            </view>
          </view>
        </view>
        <view style="padding:24rpx;" class="">
                订单创建时间：{{ item.createTime }}
        </view>
        <view class="btn">
          <!-- 当为已完成 -->
          <view class="delete" v-if="[8, 9, 11,12,16].includes(item.orderStatus)" @tap.stop="showdel(item, index)">
            删除订单
          </view>
          <view v-if="[9, 7].includes(item.orderStatus) && item.orderType == 3 && item.deliveryType==2" @tap.stop="gotologistics(item)" class="goPay">
            查看物流
          </view>
          <view @tap.stop="gotoraise(item)" v-if="item.orderStatus == 9" class="goPay">
            去评价
          </view>
          <view v-if="item.orderStatus == 1" @tap.stop="showcancel(item, index)" class="delete">
            取消订单
          </view>
          <view v-if="item.orderStatus == 1 || item.orderStatus == 6" class="goPay">
            去支付
          </view>
          <!-- 物资配送退款 -->
          <view v-if="[2, 9].includes(item.orderStatus) && item.orderType == 1 && (nowdate < new Date(item.finalRefundTime) || isNaN(new Date(item.finalRefundTime)))" class="goPay" @tap.stop="refund(item)">
            申请退款
          </view>
          <!-- 家电维修退款 -->
          <view @tap.stop="refund(item)" v-if="[2, 3, 4, 7].includes(item.orderStatus) && item.orderType == 4" class="goPay">
            申请退款
          </view>
          <!-- 农副产品退款 -->
          <view @tap.stop="refund(item)" v-if="item.orderType == 3 && [2, 3, 4, 5, 6, 7, 9].includes(item.orderStatus) && (nowdate < new Date(item.finalRefundTime) || isNaN(new Date(item.finalRefundTime)))" class="goPay">
            申请退款
          </view>
          <view @tap.stop="Receiving(item)" v-if="item.orderStatus== 7 && item.orderType== 3" class="goPay">
            确认收货
          </view>
        </view>
      </view>
    </view>
    <u-modal v-model="delshow" @confirm="delorder()" :content="contentdel" :show-cancel-button="true"
      :show-title="false"></u-modal>
    <u-modal v-model="cancelshow" @confirm="cancelorder()" :content="content" :show-cancel-button="true"
      :show-title="false"></u-modal>
  </view>
</template>

<script>
import { cancelOrder } from '@/api/common'
import { getUserOrderList, delOrder,confirmReceiveNFCP } from '@/api/main'
export default {
  data() {
    return {
      tab: [{
        name: '全部'
      },
      {
        name: '待支付'
      },
      {
        name: '进行中',
      },
      {
        name: '待评价'
      },
      {
        name: '退款',
      }
      ],
      list: [],
      current: 0,
      arr: [],
      all: 0,
      perFectId: 1,
      UnderId: 2,
      waitId: 3,
      refundId: 4,
      pageNum: 1,
      pageSize: 10,
      pagesStatus: false,
      ordersid: 0,
      delshow: false,
      cancelshow: false,
      contentdel: '确认删除该订单吗',
      content: '确认取消支付该订单吗',
      orderNum: '',
      orderindex: 0,
      nowdate:null
    }
  },
  onReady() {
  },
  onLoad(e) {
    console.log('看看e.id', e.id)
    let newindex = parseInt(e.id)
    this.ordersid = parseInt(e.id)
    console.log(newindex)
    this.selectActive(newindex)
    // this.getorderslist()
  },
  onShow() {
    // this.selectActive(this.current)
    const current_time = new Date()
    this.nowdate = new Date(current_time);
    console.log('看看时间',this.nowdate)
  },
  methods: {
    refund(item){
      console.log('看看item', item)
      if (item.orderType == 1) {
        uni.navigateTo({ url: "/pagesDelivery/deliveryBack?orderNum=" + item.orderNum })
      } else if (item.orderType == 4) {
        uni.navigateTo({ url: "/pagesMaintain/maintainBackMoney?orderNum=" + item.orderNum })
      } else if (item.orderType == 3) {
        uni.navigateTo({ url: "/pagesAgriculture/agricultureRefund?orderNum=" + item.orderNum })
      } else if (item.orderType == 2) {
        console.log('看看健康', item.orderType)
        uni.navigateTo({ url: "/pagesHealth/status?orderNum=" + item.orderNum })
      }
    },
    //获取订单列表
    getorderslist() {
      let obj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      if (this.ordersid === 0) {
        getUserOrderList(obj).then(res => {
          if (this.pageNum === 1) {
            console.log('订单列表', res)
            this.list = res.data
            console.log('订单列表', this.list)
            this.arr = this.list
          } else {
            this.list = this.list.concat(res.data)
            this.arr = this.list
          }
          if (res.data.length < 10) {
            this.pagesStatus = false
          } else {
            this.pagesStatus = true
          }
        })
      } else if (this.ordersid === 1) {
        obj.orderStatus = 25
        getUserOrderList(obj).then(res => {
          if (this.pageNum === 1) {
            console.log('订单列表', res)
            this.list = res.data
            console.log('订单列表', this.list)
            this.arr = this.list
          } else {
            this.list = this.list.concat(res.data)
            this.arr = this.list
          }
          if (res.data.length < 10) {
            this.pagesStatus = false
          } else {
            this.pagesStatus = true
          }
        })
      } else if (this.ordersid === 2) {
        obj.orderStatus = 22
        getUserOrderList(obj).then(res => {
          if (this.pageNum === 1) {
            console.log('订单列表', res)
            this.list = res.data
            console.log('订单列表', this.list)
            this.arr = this.list
          } else {
            this.list = this.list.concat(res.data)
            this.arr = this.list
          }
          if (res.data.length < 10) {
            this.pagesStatus = false
          } else {
            this.pagesStatus = true
          }
        })
      } else if (this.ordersid === 3) {
        obj.orderStatus = 9
        getUserOrderList(obj).then(res => {
          if (this.pageNum === 1) {
            this.list = res.data
            console.log('订单列表', this.list)
            this.arr = this.list
          } else {
            this.list = this.list.concat(res.data)
            this.arr = this.list
          }
          if (res.data.length < 10) {
            this.pagesStatus = false
          } else {
            this.pagesStatus = true
          }
        })
      }else if (this.ordersid === 4) {
        obj.orderStatus = 24
        getUserOrderList(obj).then(res => {
          if (this.pageNum === 1) {
            this.list = res.data
            console.log('订单列表', this.list)
            this.arr = this.list
          } else {
            this.list = this.list.concat(res.data)
            this.arr = this.list
          }
          if (res.data.length < 10) {
            this.pagesStatus = false
          } else {
            this.pagesStatus = true
          }
        })
      }
    },
    //删除订单
    showdel(item, index) {
      console.log('删除订单', item)
      this.delshow = true;
      this.orderNum = item.orderNum
      this.orderindex = index
      
    },
    showcancel(item, index) {
      console.log('删除订单', item)
      this.cancelshow = true;
      this.orderNum = item.orderNum
      this.orderindex = index
    },
    delorder() {
      let obj = {
        orderNum: this.orderNum
      }
      delOrder(obj).then(res => {
        console.log('删除订单内容', res)
        if (res.code == 200) {
          this.$u.toast('删除成功')
          // this.selectActive(this.current)
          this.arr.splice(this.orderindex, 1)
        } else {
          this.$u.toast('删除失败')
        }
      })
    },
    //取消订单
    cancelorder() {
      let obj = {
        orderNum: this.orderNum,
      }
      cancelOrder(obj).then(res => {
        if (res.code == 200) {
          this.$u.toast('取消成功')
          this.arr.splice(this.orderindex, 1)
        } else {
          this.$u.toast('取消成功')
        }
      })
    },
    //查看物流
    gotologistics(item) {
      uni.navigateTo({
        url: '/pagesMine/logistics?trackingNumber=' + item.trackingNumber
      })
    },

    selectActive(index) {
      console.log('我看看这个index', index)
      this.current = index
      this.pageNum = 1
      let obj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      if (this.current === 0) {
        getUserOrderList(obj).then(res => {
          console.log('订单列表', res)
          this.list = res.data
          console.log('订单列表', this.list)
          this.arr = this.list
          if (res.data.length < 10) {
            this.pagesStatus = false
          } else {
            this.pagesStatus = true
          }
        })
      } else if (this.current == 1) {
        obj.orderStatus = 25
        getUserOrderList(obj).then(res => {
          console.log('订单列表', res)
          this.list = res.data
          console.log('订单列表', this.list)
          this.arr = this.list
          if (res.data.length < 10) {
            this.pagesStatus = false
          } else {
            this.pagesStatus = true
          }
        })
      } else if (this.current === 2) {
        obj.orderStatus = 22
        getUserOrderList(obj).then(res => {
          console.log('订单列表', res)
          this.list = res.data
          console.log('订单列表', this.list)
          this.arr = this.list
          if (res.data.length < 10) {
            this.pagesStatus = false
          } else {
            this.pagesStatus = true
          }
        })
      } else if (this.current === 3) {
        obj.orderStatus = 9
        getUserOrderList(obj).then(res => {
          console.log('订单列表', res)
          this.list = res.data
          console.log('订单列表', this.list)
          this.arr = this.list
          if (res.data.length < 10) {
            this.pagesStatus = false
          } else {
            this.pagesStatus = true
          }
        })
      }
      else if (this.current === 4) {
        obj.orderStatus = 24
        getUserOrderList(obj).then(res => {
          console.log('订单列表', res)
          this.list = res.data
          console.log('订单列表', this.list)
          this.arr = this.list
          if (res.data.length < 10) {
            this.pagesStatus = false
          } else {
            this.pagesStatus = true
          }
        })
      }
    },
    goEvaDetail(item) {
      console.log('看看item', item)
      if (item.orderType == 1) {
        uni.navigateTo({ url: "/pagesDelivery/deliveryPayEnd?orderNum=" + item.orderNum })
      } else if (item.orderType == 4) {
        uni.navigateTo({ url: "/pagesMaintain/maintainOrders?orderNum=" + item.orderNum })
      } else if (item.orderType == 3) {
        uni.navigateTo({ url: "/pagesAgriculture/agricultureWaitPay?orderNum=" + item.orderNum })
      } else if (item.orderType == 2) {
        console.log('看看健康', item.orderType)
        uni.navigateTo({ url: "/pagesHealth/status?orderNum=" + item.orderNum })
      }
    },
    //确认收货
    Receiving(item){
      let obj={
        orderNum:item.orderNum
      }
      let _this = this;
      uni.showModal({
        title: '提示',
        content: '确认已经收到嘛！',
        success: function (res) {
          if (res.confirm) {
            confirmReceiveNFCP(obj).then(res=>{
              console.log('确认收货',res)
              _this.selectActive(0)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });

     
    },
    gotoraise(item){
      console.log('看看item',item)
      if(item.orderType!=2){
        uni.navigateTo({ url: '/pagesMaintain/maintainComments?orderNum=' + item.orderNum })
      }else{
        uni.navigateTo({ url: '/pagesHealth/healthComments' })
      }
      
    }
  },
  onPullDownRefresh: function () {
    setTimeout(() => {
      this.pageNum = 1
      this.pagesStatus = false
      this.selectActive(this.current)
      wx.stopPullDownRefresh()
    }, 2000)
  },
  onReachBottom() {
    console.log("触底", this.pagesStatus);
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.ordersid=this.current
      this.getorderslist()
    }
  },
}
</script>

<style scoped lang="scss">
.content {
  background-color: #F5F5F5;
  min-height: 100vh;

  .tabs {
    width: 100%;
    display: flex;
    align-items: center;
    height: 128rpx;
    padding: 0 32rpx;
    // overflow-x: auto; // 允许水平滚动  
    background-color: #fff;

    ::v-deep  uni-view {
      width: 100% !important;
    }

    ::v-deep .u-tab-item {
      width: 179rpx !important;
      text-align: center;
      height: 64rpx !important;
      background-color: #F2F3FF;
      border-radius: 1998rpx;
      line-height: 64rpx !important;
      margin: 0 16rpx;
      flex-shrink: 0 !important;
    }

 

    // view {
    //   width: 179rpx;
    //   text-align: center;
    //   height: 64rpx;
    //   background-color: #F2F3FF;
    //   border-radius: 1998rpx;
    //   line-height: 64rpx;
    //   margin: 0 16rpx;
    //   color: #999999;
    //   flex-shrink: 0;
    // }

    .active {
      color: #D12C25;
    }
  }
  .bigBox {
    padding: 20rpx 32rpx;

    .contentBox {
      border-top: 24rpx solid #F5F5F5;
      background-color: #fff;
      padding-bottom: 24rpx;
      border-radius: 8rpx;

      .BoxTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 24rpx;

        .BoxTopleft {
          display: flex;
          align-items: center;

          .smallImg {
            width: 40rpx;
            height: 40rpx;
            margin-right: 16rpx;
          }

          text {
            font-weight: Bold;
            font-size: 28rpx;
            font-family: PingFang SC-Bold;
          }
        }

        .BoxTopRight {
          width: 116rpx;
          height: 40rpx;
          padding: 0 16rpx;

          // 完成
          .Perfect {
            background-color: #c0ffd5;
            color: #16D356;
            width: 116rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            border-radius: 1998rpx;
          }

          // 待支付
          .Payfor {
            background-color: #fab9b9;
            color: #FF0000;
            width: 116rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            border-radius: 1998rpx;
          }

          // 进行中
          .Ongoing {
            background-color: #faeac1;
            color: #FFC123;
            width: 116rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            border-radius: 1998rpx;
          }

          // 未评价
          .Noevaluate {
            background-color: #faeac1;
            color: #FFC123;
            width: 116rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            border-radius: 1998rpx;
          }

          // 已评价
          .Already {
            background-color: #c0ffd5;
            color: #16D356;
            width: 116rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            border-radius: 1998rpx;
          }

          // 已退款
          .Refunded {
            background-color: #e9e2e2;
            color: #666666;
            width: 116rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            border-radius: 1998rpx;
          }

          // 退款中
          .Being {
            background-color: #f5e2b4;
            color: #FFC123;
            width: 116rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            border-radius: 1998rpx;
          }

          // 拒绝退款
          .refuseMoney {
            background-color: #f5e2b4;
            color: #f00;
            width: 116rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            border-radius: 1998rpx;
          }
        }
      }

      .BoxPart {
        display: flex;
        padding: 24rpx;

        image {
          width: 156rpx;
          height: 132rpx;
          border-radius: 12rpx;
          margin-right: 24rpx;
        }

        .BoxCc {
          flex: 1;

          .Boxtitle {
            font-size: 28rpx;
            font-family: PingFang SC-Regular;
            display: flex;
            justify-content: space-between;
          }

          .BoxPrice {
            display: flex;
            justify-content: space-between;
            margin-top: 15rpx;

            .Price {
              font-weight: Bold;
              color: #E33434;
              font-family: PingFang SC-Bold;
              font-size: 28rpx;
            }
          }
        }
      }

      .btn {
        display: flex;
        justify-content: flex-end;
        width: 95%;
        margin-right: 5%;


        .delete {
          width: 160rpx;
          height: 42rpx;
          border-radius: 44rpx;
          text-align: center;
          line-height: 42rpx;
          border: 1rpx solid #B1B1B1;
          color: #B1B1B1;
          font-size: 24rpx;

        }

        // 待支付
        .PayAndDel {
          display: flex;
        }

        .goPay {
          width: 160rpx;
          height: 42rpx;
          border-radius: 44rpx;
          background-color: #D12C25;
          text-align: center;
          line-height: 42rpx;
          color: #fff;
          margin-left: 24rpx;
          font-size: 24rpx;
        }

        // 进行中
        .application {
          width: 160rpx;
          height: 42rpx;
          border-radius: 44rpx;
          background-color: #D12C25;
          text-align: center;
          line-height: 42rpx;
          color: #fff;
        }

        // 未评价
        .Goevaluate {
          width: 112rpx;
          height: 42rpx;
          border-radius: 44rpx;
          background-color: #0057FF;
          text-align: center;
          line-height: 42rpx;
          color: #fff;
        }

        // 已评价
        .AlredayEvaluate {
          width: 112rpx;
          height: 42rpx;
          border-radius: 44rpx;
          background-color: #D12C25;
          text-align: center;
          line-height: 42rpx;
          color: #fff;
        }

        // 已退款
        .AlRefunded {
          width: 112rpx;
          height: 42rpx;
          border-radius: 44rpx;
          background-color: #D12C25;
          text-align: center;
          line-height: 42rpx;
          color: #fff;
        }
      }
    }
  }
}

.u-tabs ::v-deep ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
}
</style>
